import Taro, { Component } from '@tarojs/taro'
import { View,Image } from '@tarojs/components'
import './chatdetail.css'
import {AtButton} from "taro-ui"
import app from '../../../../main.js';
import reactMixin from 'react-mixin';
import myJs from './chatdetailJs.js'
import item_image from '../../../../img/item_image.png'
import icon_link from '../../../../img/icon_link.png'

export default class ChatDetail extends Component {

    config = {
        navigationBarTitleText: '咨询记录'
    }
    constructor () { 
        super(...arguments); 
        this.state = this.getData();
    }

    init() {
        this.setState({
            is_show_luyin: true,
            is_open_grid: false,
            current_index: 0,
            wenzen_order: {},
            flow_order: {}
        })
        this.getMessages();
        this.onEndedAudio();
        this.setNavigationTitle();
        this.getOrder();
        this.getFlowOrder();
    }

    getOrder() {
        var me = this;
        if (me.state.type == '问诊订单') {
            app.get('web/wenzen_order/order', {id: me.state.relate_id}, function(res) {
                me.setState({
                    wenzen_order: res.data.result
                })
            })
        }
    }

    getFlowOrder() {
        var me = this;
        if (me.state.type == '随访') {
            app.get('web/flow_order/get', {id: me.state.relate_id}, function(res) {
                me.setState({
                    flow_order: res.data.result
                })
            })
        }
    }

    setNavigationTitle() {
        app.get('web/doctor/getById', {id: this.state.receiver_id}, function(res) {
            Taro.setNavigationBarTitle({title: res.data.result.name+'的咨询记录'});
        })
    }

    offset = 0;
    length = 10;
    total = 0;

    // 初始化参数
    initData() {
        this.setState({
            mySelfId: 'p-'+this.state.sender_id,
            otherId: 'd-'+this.state.receiver_id
        }, () => {
            this.initSocket();
        })
    }

    changeLuYin(v) {
        this.setState({is_show_luyin: v})
    }

    openGrid() {
        this.setState({
            is_open_grid: !this.state.is_open_grid
        })
    }

    changeGrid(item, index) {
        if (index == 0) {
            this.uploadImage();
        } else if (index == 1) {
            this.uploadVideo();
        }
    }

    // 查看图片大图
    showImage(image) {
        console.log(image);
        app.prviewImage(image, [image]);
    }

    innerAudioContext  = Taro.createInnerAudioContext();

    // 音频播放结束监听事件
    onEndedAudio() {
        var me = this;
        this.innerAudioContext.onEnded(function(res) {
            console.log('播放结束', res);
            var messages = me.state.messages;
            messages[me.state.current_index].is_play = false;
            me.setState({
                messages: messages
            })
        })
    }

    // 点击音频
    clickAudio(url, index) {
        var messages = this.state.messages;
        var is_play = !messages[index].is_play;
        console.log(url, index);
        console.log(messages);
        for (var i = 0; i < messages.length; i++) {
            if (i == index) {
                messages[index].is_play = is_play;
            } else {
                messages[i].is_play = false;
            }
        }
        this.setState({
            messages: messages,
            current_index: index
        })

        this.innerAudioContext.src = url;
        if (is_play) {
            this.innerAudioContext.play();
        } else {
            this.innerAudioContext.stop();
        }
    }

    // 下拉刷新
    onPullDownRefresh() {
        if (this.offset < this.total) {
            this.offset += this.length;
            this.getMessages();
        } else {
            Taro.stopPullDownRefresh();
            app.toastMessage('没有消息了');
        }
    }

    //跳转到病情表单
    navTo () {
        app.navigateTo('../../../Illness/Illness')
    }

    //跳转到医生主页
    goToDocIndex () {
        app.navigateTo('../../../doctorindex/doctorindex?id='+this.state.receiver_id)
    }

    render () {
        return (
            <View id='page_v'>
                {
                    this.state.messages.map((item, index) => {
                        if (item.type == 'text' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                    <View className='content_txt'>{item.data}</View>
                                </View>
                            )
                        } else if (item.type == 'text' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <View className='content_txt'>{item.data}</View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'image' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                    <Image className='content_image' mode='widthFix' src={app.getPath(item.data)} onClick={this.showImage.bind(this, item.data)}></Image>
                                </View>
                            )
                        } else if (item.type == 'image' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <Image className='content_image' mode='widthFix' src={app.getPath(item.data)} onClick={this.showImage.bind(this, item.data)}></Image>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )   
                        } else if (item.type == 'video' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                    <Video
                                        src={app.getPath(item.data)}
                                        controls={true}
                                        autoplay={false}
                                        initialTime='0'
                                        id='video'
                                        loop={false}
                                        muted={false}
                                        className='content_video'
                                    />
                                </View>
                            )   
                        } else if (item.type == 'video' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <Video
                                        src={app.getPath(item.data)}
                                        controls={true}
                                        autoplay={false}
                                        initialTime='0'
                                        id='video'
                                        loop={false}
                                        muted={false}
                                        className='content_video'
                                    />
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )   
                        } else if (item.type == 'audio' && !item.isMyself) {
                            return (
                                 <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                    <View className='audio_box' onClick={this.clickAudio.bind(this, item.data.url, index)}>
                                        <Image className='audio_image' src={item.is_play ? app.getPath('img/play_right.gif') : app.getPath('img/play_right.png')}></Image>
                                        <View className='audio_txt'>{item.data.time}''</View>
                                    </View>
                                </View>
                            )   
                        } else if (item.type == 'audio' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <View className='audio_box'>
                                        <Image className='audio_image' src={app.getPath('img/play_left.png')}></Image>
                                        <View className='audio_txt'>{item.data.time}''</View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                </View>
                            )   
                        } else if (item.type == 'article' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                    <View className='article' onClick={this.navigateTo.bind(this, '/pages/aiyanPolularVideo/aiyanPolularVideo?kepuid='+item.data.id)}>
                                        <Image className='icon_link' src={icon_link}>/</Image>
                                        <View className='article_txt'>{item.data.title}</View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'article' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <View className='article' onClick={this.navigateTo.bind(this, '/pages/aiyanPolularVideo/aiyanPolularVideo?kepuid='+item.data.id)}>
                                        <Image className='icon_link' src={icon_link}>/</Image>
                                        <View className='article_txt'>{item.data.title}</View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'flow' && !item.isMyself) {
                            return (
                                <View className="chat_item">
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                    <View className='flow' onClick={this.navigateTo.bind(this,'/pages/center/pages/suifangjihuaxiangqing/suifangjihuaxiangqing?id='+item.data.id)}>
                                        <View className='flw_top'>{item.data.title}</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={app.getPath('img/item_image.png')}></Image>
                                            <View className='flw_txt'>我给您定制了一个随访计划，请遵照计划中提醒的内容来执行。</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'flow' && item.isMyself) {
                            return (
                                <View className="chat_item right">
                                    <View className='flow' onClick={this.navigateTo.bind(this,'/pages/center/pages/suifangjihuaxiangqing/suifangjihuaxiangqing?id='+item.data.id)}>
                                        <View className='flw_top'>{item.data.title}</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={app.getPath('img/item_image.png')}></Image>
                                            <View className='flw_txt'>我给您定制了一个随访计划，请遵照计划中提醒的内容来执行。</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'flag') {
                            return (
                                <View className='flag'>
                                    {
                                        !app.isEmpty(item.data.title) &&
                                        <View className='flag_top'>
                                            <View className='dot'>
                                                <View className='fl_dot dot_width'></View>
                                            </View>
                                            <View className='fl_txt'>{item.data.title}</View>
                                            <View className='dot'>
                                                <View className='fr_dot dot_width'></View>
                                            </View>
                                        </View>
                                    }
                                    <View className='f_time'>{item.data.time}</View>
                                </View>
                            )
                        } else if (item.type == 'wz_illness_form' && !item.isMyself) {
                            return (
                                <View className="chat_item">
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)}></Image>
                                    <View className='flow' onClick={this.navigateTo.bind(this, '../../../Illness/Illness?id='+item.data.id)}>
                                        <View className='flw_top'>病情表单</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={item_image}></Image>
                                            <View className='flw_txt'>{item.data.title}</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'wz_illness_form' && item.isMyself) {
                            return (
                                <View className="chat_item right">
                                    <View className='flow' onClick={this.navigateTo.bind(this, '../../../Illness/Illness?id='+item.data.id)}>
                                        <View className='flw_top'>病情表单</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={item_image}></Image>
                                            <View className='flw_txt'>{item.data.title}</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        }
                    })
                }


                {
                    this.state.wenzen_order.id && this.state.wenzen_order.status == '咨询结束'
                    &&
                    <View className='comment_box'><AtButton className='comment_btn' type='primary' size='small' onClick={this.navigateTo.bind(this, '../../../Evaluate/Evaluate?id='+this.state.wenzen_order.id+'&doc_id='+this.state.receiver_id)}>去评价</AtButton></View>
                }

                {
                    (this.state.wenzen_order.id || this.state.flow_order.id)
                    &&
                    <View style='width:750rpx;height:100rpx;'></View>
                }

                {
                    (this.state.wenzen_order.id || this.state.flow_order.id)
                    &&
                    <View className='bottom'>
                        <View className='again_box'><AtButton className='again_btn' type='primary' onClick={this.goToDocIndex.bind(this)}>再次咨询</AtButton></View>
                    </View>
                }
            </View>
        )
    }
}
reactMixin.onClass(ChatDetail,myJs);
